<script setup>
import {
  cateService_addArticle,
  cateService_deleteArticle,
  cateService_getArticleInfo,
  cateService_getList,
  cateService_updateArticle
} from '@/apis/article'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

// --------- 数据区 -------------
let title = ref('文章分类')
let loading = ref(true)
let tableData = ref([])
let dialogFormVisible = ref(false)
// 对话框显示的文本，可以用id判断，也可以用dialogTitle判断
let dialogTitle = ref('')
// 提交到后端的代码
let cateForm = ref({
  id: '',
  cate_name: '',
  cate_alias: ''
})

// 表单验证,和props绑定
let myRule = ref({
  cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' }]
})

// ---------- 方法区 -------------
// 1. 发送获取文章分类列表
let getArticleList = async () => {
  const { data } = await cateService_getList()
  tableData.value = data
  loading.value = false
}
getArticleList()

const handleDelete = (index, row) => {
  cateForm.value.id = row.id
  ElMessageBox.confirm('确认要删除此分类吗?', '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await cateService_deleteArticle(row.id)
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      // 删除成功
      await getArticleList()
    })
    .catch(() => {
      // 取消
    })
}

// 同一个方法，不同的传参，有传参id就是编辑，没有就是添加
const handleEdit = async (row) => {
  loading.value = true
  dialogTitle.value = '编辑分类'
  dialogFormVisible.value = true
  const { data } = await cateService_getArticleInfo(row.id)
  cateForm.value = data
  loading.value = false
}

// 提交到后端数据，有id就是编辑，没有id就是添加，点击确认按钮的时候触发
const submit = async () => {
  let tips = ''
  if (cateForm.value.id) {
    tips = '更新成功'

    await cateService_updateArticle({
      id: cateForm.value.id,
      cate_name: cateForm.value.cate_name,
      cate_alias: cateForm.value.cate_alias
    })
  } else {
    tips = '添加成功'
    await cateService_addArticle({
      id: cateForm.value.id,
      cate_name: cateForm.value.cate_name,
      cate_alias: cateForm.value.cate_alias
    })
  }
  getArticleList()
  ElMessage({
    type: 'success',
    message: tips
  })
  dialogFormVisible.value = false
}
</script>

<template>
  <CardPage :title="title">
    <el-button
      class="button"
      type="primary"
      @click="
        {
          dialogFormVisible = true
          cateForm = {}
        }
      "
      >添加分类</el-button
    >
    <template #extra>
      <el-table
        v-loading="loading"
        :data="tableData"
        :max-height="350"
        :row-height="40"
        :width="700"
        :height="400"
        :footer-height="50"
      >
        <el-table-column
          height="100"
          width="120"
          label="序号"
          type="index"
          :index="index"
        />
        <el-table-column height="100" label="分类名称" prop="cate_name" />
        <el-table-column
          height="100"
          width="550"
          label="分类别名"
          prop="cate_alias"
        />
        <el-table-column height="100" label="操作">
          <template #default="scope">
            <el-icon
              color="#3f96f1"
              :size="18"
              @click="handleEdit(scope.row)"
              class="icon_class edit_icon"
            >
              <Edit />
            </el-icon>
            <el-icon
              color="#f67d7d"
              :size="18"
              @click="handleDelete(scope.$index, scope.row)"
              class="icon_class del_icon"
            >
              <Delete />
            </el-icon>
          </template>
        </el-table-column>

        <template #empty>
          <div
            v-if="tableData.length === 0"
            class="flex items-center justify-center h-100%"
            style="justify-content: center"
          >
            <el-empty description="没有数据" />
          </div>
        </template>
      </el-table>
    </template>

    <!-- 编辑或者添加分类的对话框 -->
    <!-- :title="cateForm.id ? '编辑分类' : '添加分类'" -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="cateForm.id ? '编辑分类' : '添加分类'"
      width="450"
    >
      <el-form :rules="myRule" :loading="loading" :model="cateForm">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="cateForm.cate_name" />
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="cateForm.cate_alias" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submit"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </CardPage>
</template>

<style lang="scss" scoped>
:deep .el-table tr {
  height: 60px;
}

:deep .el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + 10px)
    calc(var(--el-dialog-padding-primary) + 20px);
}
</style>
